<template>
  <div class="maxroot">
    <FontHeader @reload="reload1"></FontHeader>
    <div class="headslider slider-auto" id="indexTopSlide" data-ride="carousel" data-loop="true">
      <div class="swiper-container">
        <div class="swiper-wrapper">
<!--          autoplay="true" interval="2000"-->
          <div v-for="item in banner" :key="item.id" class="swiper-slide">
            <img :src="item.image" class="swiperbanner">
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
      </div>
<!--      轮播图上方阴影-->
      <div class="mask1"></div>
<!--      轮播图下方阴影-->
      <div class="mask2"></div>
    </div>
    <div class="todayhot" data-step="1" data-intro="个性化推荐：每当用户对电影评分后，推荐内容都会变更">
      <div class="mask"></div>
      <div class="container">
        <div class="hotnews" style="display: block">
          <h4 class="customtitle" style="cursor: pointer" @click="newUserIntro()">新手引导</h4>
          <span id="showTodayRecmd" class="showTodayRecmd" style="display:block;">{{ this.recSize }}</span>
          <ul class="newslist">
            <li class="newsitem" v-for="item in movies" :key="item.movieId">
              <div class="cinameimgout showMovieBrief">
<!--                @mouseenter="show3 = !show3" 激活下方的-->
                <router-link :to="{path:'/detail',query:{movieId:item.movieId}}">
                  <a href="#" target="_blank" :title="item.movieName" class="cinameimgitem">
<!--                    本地运行改为http://localhost:8081/posters/-->
                    <img :src="'http://43.138.158.143/posters/'+item.movieId+'.jpg'" :alt="item.movieName">
                    <em class="icohot">HOT</em>
                    <i class="moviegrade" style="color: white">{{item.rating}}</i>
                  </a>
                </router-link>
              </div>
              <div class="movieName">
                <h3>
                  <a>{{item.movieName}}</a>
                  <img src="http://43.138.158.143/inner/images/nextMovie.png" style="margin-bottom: 4px;margin-left: 5px;width: 15px;vertical-align: middle">
                </h3>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import FontHeader from "@/components/FontHeader";
import introJs from 'intro.js';
import 'intro.js/minified/introjs.min.css';


export default {
  components: {FontHeader},
  inject: ['reload'],
  name: "Index",
  data() {
    return {
      user:{},
      userName: '',
      userlogout:{},
      isLoding:false,
      placetext: "搜索电影、影人、文章、用户、家族、片单、视频",
      searchinfo: "",
      options: [{
        value: '电影名称',
        label: '电影名称'
      }, {
        value: '电影类型',
        label: '电影类型'
      }],
      value: "",
      banner: [
        {
          "id": "1",
          "image": "http://43.138.158.143/inner/images/r1.jpg"
          // "image": require("../assets/images/r2.jpg")
        },
        {
          "id": "2",
          "image": "http://43.138.158.143/inner/images/r2.jpg"
        },
        {
          "id": "3",
          "image": "http://43.138.158.143/inner/images/r3.jpg"
        },
        {
          "id": "4",
          "image": "http://43.138.158.143/inner/images/r4.jpg"
        }
      ],
      movies: [],
      recSize: 10,
      loginstatus: 0,
      show3: false,
      publishdisplay: false
    }
  },
  created() {
    this.islogin()
    this.todayRec()
  },
  computed:{
    canSubmit(){
      const {userName,userPassword} = this.user
      return Boolean(userName && userPassword)
    }
  },
  methods: {
    newUserIntro(){
      introJs().start();
    },
    islogin() {
      //这样做只能检测到有无token，却不能检测到token是否过期
      if(localStorage.getItem("Token") !== null){
        this.loginstatus = 1
        this.userName = localStorage.getItem("userName")
      }else{
        this.loginstatus = 0
      }
    },
    reload1 () {
      this.reload();
    },
    todayRec() {
      if(this.loginstatus == 0){
        this.request.get("/movie/visitor/getHotMovies", {
          params: {
            size: this.recSize,
          }
        }).then(res => {
          if (res.code == 0) {
            this.movies = res.data
          } else {
            this.$message.error(res.message)
          }
        })
      }else{
        this.request.get("/user/recMovieForYou", {
        params: {
          userId: localStorage.getItem("userId"),
          size: this.recSize,
        }
      }).then(res => {
        if (res.code == 0) {
          this.movies = res.data
        } else {
          this.$message.error(res.message)
        }
      })
      }

    },
  },
  mounted() {
    new Swiper('.swiper-container', {
      // direction: 'vertical', // 垂直切换选项，默认横向
      loop: true, // 循环模式选项
      autoplay:{
        delay:2000,
        disableOnInteraction: false,
      },
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    })
  }
}
</script>

<style scoped>
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409EFF;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>